<template>
  <div>
    <van-nav-bar
        :fixed="true"
        @click-left="onClickLeft"
    >
      <div class="van-nav-bar_title" slot="title">{{ i18n.repay }}</div>
      <van-icon name="arrow-left" slot="left" class="nav_bar_icon"></van-icon>
    </van-nav-bar>
    <van-row class="main">
      <div class="top">
        <!--当前需还款项-->
        <h3 class="title">{{ i18n.now }}</h3>
        <div class="item">
          {{ orderData.delayPayAmount }}RP
        </div>

        <!--应还日期-->
        <h3 class="title">{{ i18n.should }}</h3>
        <div class="item">
          {{ orderData.planRepaymentDate }}
        </div>
      </div>
      <!--      <van-button class="my-btn btn1" type="primary" @click="$router.push(`/repay-code?type=va&orderId=${orderId}`)">
              {{ i18n.repayBtnVA }}
            </van-button>
            <van-button class="my-btn btn2" type="primary" @click="$router.push(`/repay-code?type=ft&orderId=${orderId}`)">
              {{ i18n.repayBtnFT }}
            </van-button>-->

      <van-button v-for="(item, index) in btnList"
                  class="my-btn"
                  :class="{btn1: index === 0, btn2: index !== 0}"
                  type="primary"
                  @click="$router.push(`/repay-code?type=${item.type}&orderId=${orderId}&code=${item.code}`)">
        {{ item.name }}
      </van-button>
    </van-row>
  </div>
</template>

<script>
import { getLDCodeMap, orderDetail } from "@/api";

/*
  银行:repType = 1
 {
        "code": "1005",
        "name": "PERMATA"
      },
 {
        "code": "1003",
        "name": "MANDIRI"
      },
 {
        "code": "1001",
        "name": "BNI"
      }

 店铺:repType = 2
 {
        "code": "2001",
        "name": "Alfamart"
      }

 */

export default {
  name: "Repay",
  data() {
    return {
      // detailInfo: {},
      // show: false,
      // actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      orderId: this.$route.query.orderId,
      orderData: {},
      btnList: [
        // {
        //   code: "1005",
        //   name: "PERMATA",
        //   type: 'bank'
        // },
        // {
        //   code: "1003",
        //   name: "MANDIRI",
        //   type: 'bank'
        // },
        // {
        //   code: "1001",
        //   name: "BNI",
        //   type: 'bank'
        // },
        // {
        //   code: "2001",
        //   name: "Alfamart",
        //   type: 'shop'
        // }
      ]
    }
  },
  computed: {
    i18n() {
      return this.$t('repayCode');
    },
    loginInfo() {
      return JSON.parse(sessionStorage.getItem('loginInfo'))
    }
  },
  created() {
    this.getMap()
    this.getData()
  },
  methods: {
    async getMap() {
      const res = await getLDCodeMap(this.loginInfo.id)
      this.btnList = [
          ...res.bankMap.map(item => ({...item, type: 'bank'})),
          ...res.storeMap.map(item => ({...item, type: 'shop'})),
      ]
    },
    async getData() {
      const res = await orderDetail({ orderId: this.orderId })
      if (res.data.success) {
        this.orderData = res.data.data;
      } else {
        this.$notify(res.data.message);
      }
    },
    onClickLeft() {
      // this.$bridge.goBack();
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/css/main";

.top {
  font-family: SourceHanSansSC-Regular, SourceHanSansSC, sans-serif;
  background: linear-gradient(135deg, #20CA72 0%, #33C3B4 100%);
  overflow: hidden;
  padding: 0 16px 16px;

  .title {
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .item {
    padding: 9px 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 24px;
  }
}

.my-btn {
  display: block;
  width: 90%;
  margin: 0 auto;
  height: 44px;
  background: #39C581;
  border-radius: 4px;

  ::v-deep(.van-button__text) {
    font-size: 14px;
    font-weight: 500;
  }

  &.btn1 {
    margin-top: 24px;
    margin-bottom: 8px;
  }

  &.btn2 {
    margin-bottom: 8px;
  }
}
</style>
